<template>
  <div ref="chartRef"></div>
</template>

<script setup lang="tsx">
import { nextTick, onMounted, ref, watch } from 'vue';
import { useTemplateRef } from 'vue';
import { getTriggerStatistics } from '@/pages/screen/api';
import * as eCharts from 'echarts';
import { eventBus } from '@/utils/eventMitt';

const chartRef = useTemplateRef('chartRef');

const structureId = ref(history.state.structureId || '');

// 获取触发统计数据
const seriesData = ref<any>({});
const init = async () => {
  const res = await getTriggerStatistics({ id: structureId.value });
  seriesData.value = res.data;
};

// 饼图渐变色
const itemStyleColorEnum = {
  0: new eCharts.graphic.LinearGradient(
    0,
    0,
    1,
    1, // 线性渐变方向
    [
      { offset: 0, color: '#4F1922' },
      { offset: 1, color: '#B55C6B' },
    ],
  ),
  1: new eCharts.graphic.LinearGradient(
    0,
    0,
    1,
    1, // 线性渐变方向
    [
      { offset: 0, color: '#723A01' },
      { offset: 1, color: '#FFAC59' },
    ],
  ),
  2: new eCharts.graphic.LinearGradient(
    0,
    0,
    1,
    1, // 线性渐变方向
    [
      { offset: 0, color: '#615A21' },
      { offset: 1, color: '#D4C964' },
    ],
  ),
  3: new eCharts.graphic.LinearGradient(
    0,
    0,
    1,
    1, // 线性渐变方向
    [
      { offset: 0, color: '#72FDDF' },
      { offset: 1, color: '#194F43' },
    ],
  ),
  4: new eCharts.graphic.LinearGradient(
    0,
    0,
    1,
    1, // 线性渐变方向
    [
      { offset: 0, color: '#193D4F' },
      { offset: 1, color: '#72CFFD' },
    ],
  ),
  5: new eCharts.graphic.LinearGradient(
    0,
    0,
    1,
    1, // 线性渐变方向
    [
      { offset: 0, color: '#234981' },
      { offset: 1, color: '#5E9EFF' },
    ],
  ),
};
const leftStyleEnum = {
  1: '28%',
  2: '25%',
  3: '22%',
  4: '20%',
  5: '16%',
  6: '13%',
};
const renderChart = () => {
  let total = 0;
  const _data =
    seriesData.value?.map((item, index) => {
      total += item.triggerCount;
      return {
        value: item.triggerCount || 0,
        name: `${item.code}   ${item.triggerCount || 0}`,
        itemStyle: {
          color: itemStyleColorEnum[index],
        },
      };
    }) || [];
  const option = {
    // 设置环形饼图中间文字
    graphic: [
      {
        type: 'text',
        left: total == 0 ? '47%' : leftStyleEnum[total.toString().length],
        top: '39%',
        style: {
          text: total,
          fontSize: 30,
          fill: '#fff',
          fontWeight: 'bold',
          textAlign: 'center',
        },
      },
      {
        type: 'text',
        left: total == 0 ? '46%' : '26%',
        top: '54%',
        style: {
          text: '总数',
          fontSize: 18,
          fill: '#fff',
          fontWeight: 'normal',
          textAlign: 'center',
        },
      },
    ],
    tooltip: {
      trigger: 'item',
    },
    legend: {
      top: '30%',
      right: '0',
      itemWidth: 8, // 设置图例颜色块的宽度
      itemHeight: 8, // 设置图例颜色块的高度
      orient: 'vertical',
      textStyle: {
        color: '#fff',
      },
    },
    series: [
      {
        // name: '触发统计',
        type: 'pie',
        radius: ['40%', '70%'],
        center: [`${total == 0 ? '50%' : '30%'}`, '50%'],
        avoidLabelOverlap: false,
        label: {
          show: false,
          position: 'center',
        },
        labelLine: {
          show: false,
        },
        data: _data,
      },
    ],
  };
  const chart = eCharts.init(chartRef.value);
  chart.setOption(option);
  addEventListener('resize', function () {
    chart.resize();
  });
};

onMounted(async () => {
  await init();
  nextTick(() => {
    renderChart();
  });
});

// 监听左侧下拉框变化:重新获取测点信息
eventBus.on('changeStructure', (data: any) => {
  structureId.value = data.structureId;
});

// 监听structureId变化后重新获取数据
watch(() => structureId.value, init);
</script>

<style lang="scss" scoped></style>
